<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; %>
<html>
<head>
    <meta charset="UTF-8">
    <base href="<%=basePath%>">
    <title>苏半夏的个人博客</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="site.webmanifest">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/logo/blog_icon.png">
    <!-- CSS here -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/hamburgers.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/css/themify-icons.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!--? Preloader Start -->
<div id="preloader-active">
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="preloader-inner position-relative">
            <div class="preloader-circle"></div>
            <div class="preloader-img pere-text">
                <img src="assets/img/logo/loder.png" alt="">
            </div>
        </div>
    </div>
</div>
<!-- Preloader Start -->
<header>
    <!-- Header Start -->
    <div class="header-area">
        <div class="main-header ">
            <div class="header-bottom  header-sticky">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <!-- Logo -->
                        <div class="col-xl-2 col-lg-2">
                        </div>
                        <div class="col-xl-10 col-lg-10">
                            <div class="menu-wrapper  d-flex align-items-center justify-content-end">
                                <!-- Main-menu -->
                                <div class="main-menu d-none d-lg-block">
                                    <nav>
                                        <ul id="navigation">
                                            <li><a href="blogDetails/backIndex.do">首页</a></li>
                                            <li><a href="index/toSelfPage.do">个人主页</a></li>
                                            <li><a href="index/toErrorPage.do">友情链接</a></li>
                                            <li><a href="index/toThankPage.do">鸣谢</a></li>
                                        </ul>
                                    </nav>
                                </div>
                                <!-- Header-btn -->
                                <div class="header-right-btn d-none d-lg-block ml-20">
                                    <a href="mailto:3228314370@qq.com" class="btn header-btn">联系我</a>
                                </div>
                            </div>
                        </div>
                        <!-- Mobile Menu -->
                        <div class="col-12">
                            <div class="mobile_menu d-block d-lg-none"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->
</header>
<main>
    <!--? Hero Start -->
    <div class="slider-area2">
        <div class="slider-height2 d-flex align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="hero-cap hero-cap2 pt-70">
                            <h2>博客详情页</h2>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="blogDetails/backIndex.do">主页</a></li>
                                    <li class="breadcrumb-item"><a href="javascript:(0);">博客详情</a></li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero End -->
    <!--? Blog Area Start -->
    <section class="blog_area single-post-area section-padding" articleId="${article.id}" id="articleSection">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 posts-list">
                    <div class="single-post">
                        <div class="feature-img">
                            <img class="img-fluid" src="assets/img/blog/${article.pictureId}" alt="">
                        </div>
                        <div class="blog_details">
                            <h2 style="color: #2d2d2d;">${article.articleTitle}</h2>
                            <ul class="blog-info-link mt-3 mb-4">
                                <li><a id="browseTotal" href="javascript:(0);"><i class="fa fa-user"></i></a></li>
                                <li><a id="commentTotal" href="javascript:(0);"><i class="fa fa-comments"></i></a></li>
                            </ul>
                            ${article.articleContent}
                        </div>
                    </div>
                    <div class="navigation-top">
                        <div class="navigation-area">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-12 nav-left flex-row d-flex justify-content-start align-items-center"
                                     id="previousArticle">

                                </div>
                                <div class="col-lg-6 col-md-6 col-12 nav-right flex-row d-flex justify-content-end align-items-center"
                                     id="nextArticle">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="comments-area">
                        <h4>评 论</h4>
                        <div class="comment-list">
                        </div>
                    </div>
                        <div class="comment-form">
                            <h4>留下您的足迹</h4>
                            <form class="form-contact comment_form" id="commentForm">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group"><textarea class="form-control w-100" name="comment"
                                                                          id="comment" cols="30" rows="9"
                                                                          placeholder="写下评论"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <input class="form-control" name="name" id="nickName" type="text"
                                                   placeholder="昵称">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <input class="form-control" name="email" id="email" type="email"
                                                   placeholder="电子邮箱">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="button" class="button button-contactForm btn_1 boxed-btn"
                                            id="submitCommentBtn">提 交
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="blog_right_sidebar">
                            <aside class="single_sidebar_widget post_category_widget">
                                <h4 class="widget_title" style="color: #2d2d2d;">分类</h4>
                                <ul class="list cat-list" id="categoryList">
                                </ul>
                            </aside>
                            <aside class="single_sidebar_widget popular_post_widget" id="recentArticleList">
                                <h3 class="widget_title" style="color: #2d2d2d;">近期文章</h3>
                            </aside>
                            <aside class="single_sidebar_widget tag_cloud_widget">
                                <h4 class="widget_title" style="color: #2d2d2d;">标签</h4>
                                <ul class="list" id="tagList">
                                </ul>
                            </aside>
                        </div>
                    </div>
                </div>
            </div>
    </section>
    <!-- Blog Area End -->
</main>
<footer>
    <div class="footer-wrapper">
        <!-- footer-bottom area -->
        <div class="footer-bottom-area">
            <div class="container">
                <div class="footer-border">
                    <div class="row d-flex align-items-center">
                        <div class="col-xl-12 ">
                            <div class="footer-copy-right text-center">
                                <p>With the earth and the sky and the water,
                                    remade, like a casket of gold
                                    For my dreams of your image that blossoms
                                    a rose in the deeps of my heart.</p>
                                <p>For My NingNing</p>
                                <p>
                                    <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                                    Not only for record learning, but also for recording our love <i class="fa fa-heart"
                                                                                                     aria-hidden="true"></i>
                                    From 20200709
                                    <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer End-->
    </div>
</footer>
<!-- Scroll Up -->
<div id="back-top">
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>

<!-- JS here -->

<script src="./assets/js/vendor/modernizr-3.5.0.min.js"></script>
<!-- Jquery, Popper, Bootstrap -->
<script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="./assets/js/popper.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<!-- Jquery Mobile Menu -->
<script src="./assets/js/jquery.slicknav.min.js"></script>

<!-- Jquery Slick , Owl-Carousel Plugins -->
<script src="./assets/js/owl.carousel.min.js"></script>
<script src="./assets/js/slick.min.js"></script>
<!-- One Page, Animated-HeadLin -->
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/js/animated.headline.js"></script>
<script src="./assets/js/jquery.magnific-popup.js"></script>

<!-- Date Picker -->
<script src="./assets/js/gijgo.min.js"></script>
<!-- Nice-select, sticky -->
<script src="./assets/js/jquery.nice-select.min.js"></script>
<script src="./assets/js/jquery.sticky.js"></script>

<!-- counter , waypoint,Hover Direction -->
<script src="./assets/js/jquery.counterup.min.js"></script>
<script src="./assets/js/waypoints.min.js"></script>
<script src="./assets/js/jquery.countdown.min.js"></script>
<script src="./assets/js/hover-direction-snake.min.js"></script>

<!-- contact js -->
<script src="./assets/js/contact.js"></script>
<script src="./assets/js/jquery.form.js"></script>
<script src="./assets/js/jquery.validate.min.js"></script>
<script src="./assets/js/mail-script.js"></script>
<script src="./assets/js/jquery.ajaxchimp.min.js"></script>

<!-- Jquery Plugins, main Jquery -->
<script src="./assets/js/plugins.js"></script>
<script src="./assets/js/main.js"></script>


<script type="text/javascript">
    $(function () {
        function queryAllList() {
            $.ajax({
                url: "index/queryAllArticleList.do",
                type: "post",
                dataType: "json",
                success: function (data) {
                    var htmlStrTag = ""
                    $.each(data.articleTagList, function (index, obj) {
                        htmlStrTag += "<li>"
                        htmlStrTag += "<a href=\"javascript:(0);\" tagId='" + obj.id + "' class='justFull'>" + obj.tagname + "</a>"
                        htmlStrTag += "</li>"
                    })
                    var htmlStrCategory = ""
                    $.each(data.secondCategoryList, function (index, obj) {
                        htmlStrCategory += "<li>"
                        htmlStrCategory += "<a href='javascript:(0);' categoryId='" + obj.id + "' class=\"d-flex\">"
                        htmlStrCategory += "<p>" + obj.name + "</p>"
                        htmlStrCategory += "</a>"
                        htmlStrCategory += "</li>"
                    })
                    $("#tagList").html(htmlStrTag)
                    $("#categoryList").html(htmlStrCategory)
                }
            })
        }

        queryAllList()

        function queryBlogListPageByTag(tagId) {
            $.ajax({
                url: "index/queryAllArticleListByTag.do",
                data: {
                    tagId: tagId
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    var htmlStr = ""
                    //循环遍历所得到的文章数组
                    $.each(data.articleList, function (index, obj) {
                        var m = (obj.createDate).substr(5, 2)
                        var mouth = ""
                        switch (m) {
                            case "01" :
                                mouth = "Jan";
                                break;
                            case "02" :
                                mouth = "Feb";
                                break;
                            case "03" :
                                mouth = "Mar";
                                break;
                            case "04" :
                                mouth = "Apr";
                                break;
                            case "05" :
                                mouth = "May";
                                break;
                            case "06" :
                                mouth = "Jun";
                                break;
                            case "07" :
                                mouth = "Jul";
                                break;
                            case "08" :
                                mouth = "Aug";
                                break;
                            case "09" :
                                mouth = "Sept";
                                break;
                            case "10" :
                                mouth = "Oct";
                                break;
                            case "11" :
                                mouth = "Nov";
                                break;
                            case "12" :
                                mouth = "Dec";
                                break;
                        }
                        var day = (obj.createDate).substr(8, 2)
                        htmlStr += "<article class=\"blog_item\" >"
                        htmlStr += "<div class=\"blog_item_img\">"
                        htmlStr += "<img class=\"card-img rounded-0\" src=\"assets/img/blog/" + obj.pictureId + "\" alt=\"\">"
                        htmlStr += "<a href=\"javascript:void(0);\" class=\"blog_item_date\">"
                        htmlStr += "<h3>" + day + "</h3>"
                        htmlStr += "<p>" + mouth + "</p>"
                        htmlStr += "</a>"
                        htmlStr += "</div>"
                        htmlStr += "<div class=\"blog_details\">"
                        htmlStr += "<a class=\"d-inline-block\" articleId = '" + obj.id + "' href=\"blogDetails.jsp\">"
                        htmlStr += "<h2 class=\"blog-head\" style=\"color: #2d2d2d;\">" + obj.articleTitle + "</h2>"
                        htmlStr += "</a>"
                        htmlStr += "<p>" + obj.articleAbstract + "</p>"
                        htmlStr += "<ul class=\"blog-info-link\">"
                        htmlStr += "<li><a href=\"javascript:void(0);\"><i class=\"fa fa-user\"></i> 8 访问</a></li>"
                        htmlStr += "<li><a href=\"javascript:void(0);\"><i class=\"fa fa-comments\"></i> 3 评论</a></li>"
                        htmlStr += "</ul>"
                        htmlStr += "</div>"
                        htmlStr += "</article>"
                    })
                    $(".blog_left_sidebar").html(htmlStr)
                    if (data.total % 5 == 0) {
                        pageTotals = data.total / 5
                    } else {
                        pageTotals = parseInt(data.total / 5) + 1
                    }
                }
            })
        }

        $("#tagList").on("click", "a", function () {
            var tagId = $(this).attr("tagId")
            queryBlogListPageByTag(tagId)
        })

        function queryRecentArticleList() {
            $.ajax({
                url: "index/queryArticleRecent.do",
                type: "post",
                dataType: "json",
                success: function (data) {
                    var htmlStr = ""
                    $.each(data, function (index, obj) {
                        var m = (obj.createDate).substr(5, 2)
                        var mouth = ""
                        switch (m) {
                            case "01" :
                                mouth = "January";
                                break;
                            case "02" :
                                mouth = "February";
                                break;
                            case "03" :
                                mouth = "March";
                                break;
                            case "04" :
                                mouth = "April";
                                break;
                            case "05" :
                                mouth = "May";
                                break;
                            case "06" :
                                mouth = "June";
                                break;
                            case "07" :
                                mouth = "July";
                                break;
                            case "08" :
                                mouth = "August";
                                break;
                            case "09" :
                                mouth = "September";
                                break;
                            case "10" :
                                mouth = "October";
                                break;
                            case "11" :
                                mouth = "November";
                                break;
                            case "12" :
                                mouth = "December";
                                break;
                        }
                        var day = (obj.createDate).substr(8, 2)
                        var year = (obj.createDate).substr(0, 4)
                        htmlStr += "<div class=\"media post_item\">"
                        htmlStr += "<img src=\"assets/img/post/" + obj.pictureId + "\" alt=\"post\">"
                        htmlStr += "<div class=\"media-body\">"
                        htmlStr += "<a href=\"javascript:(0);\" articleId='" + obj.id + "'>"
                        htmlStr += "<h3 style=\"color: #2d2d2d;\">" + obj.articleTitle + "</h3>"
                        htmlStr += "</a>"
                        htmlStr += "<p>" + mouth + " " + day + ", " + " " + year + "</p>"
                        htmlStr += "</div>"
                        htmlStr += "</div>"
                    })
                    $("#recentArticleList").append(htmlStr)
                }
            })
        }

        queryRecentArticleList()

        //给近期文章的列表添加单击事件
        $("#recentArticleList").on("click", "a", function () {
            var articleId = $(this).attr("articleId")
            window.location.href = "index/toBlogDetailPage.do?id=" + articleId
        })

        //查询前一篇和后一篇文章
        function queryArticleProAndNext() {
            var id = $("#articleSection").attr("articleId")
            $.ajax({
                url: "blogDetails/queryProAndNextArticle.do",
                data: {
                    id: id
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    var htmlPro = ""
                    var htmlNext = ""
                    if (data.articlePro != null) {
                        htmlPro += "<div class=\"thumb\">"
                        htmlPro += "<a href='index/toBlogDetailPage.do?id=" + data.articlePro.id + "'>"
                        htmlPro += "<img class=\"img-fluid\" src=\"assets/img/post/" + data.articlePro.pictureId + "\" alt=''>"
                        htmlPro += "</a>"
                        htmlPro += "</div>"
                        htmlPro += "<div class=\"arrow\">"
                        htmlPro += "<a href='index/toBlogDetailPage.do?id=" + data.articlePro.id + "'>"
                        htmlPro += "<span class=\"lnr text-white ti-arrow-left\"></span>"
                        htmlPro += "</a>"
                        htmlPro += "</div>"
                        htmlPro += "<div class=\"detials\">"
                        htmlPro += "<p>上一篇文章</p>"
                        htmlPro += "<a href='index/toBlogDetailPage.do?id=" + data.articlePro.id + "'>"
                        htmlPro += "<h4 style=\"color: #2d2d2d;\">" + data.articlePro.articleTitle + "</h4>"
                        htmlPro += "</a>"
                        htmlPro += "</div>"
                    } else {
                        htmlPro += "<div class=\"thumb\">"
                        htmlPro += "<a href='javascript:(0);'>"
                        htmlPro += "<img class=\"img-fluid\" src=\"assets/img/post/preview.png\" alt=''>"
                        htmlPro += "</a>"
                        htmlPro += "</div>"
                        htmlPro += "<div class=\"arrow\">"
                        htmlPro += "<a href='javascript:(0);'>"
                        htmlPro += "<span class=\"lnr text-white ti-arrow-left\"></span>"
                        htmlPro += "</a>"
                        htmlPro += "</div>"
                        htmlPro += "<div class=\"detials\">"
                        htmlPro += "<p>上一篇文章</p>"
                        htmlPro += "<a href='javascript:(0);'>"
                        htmlPro += "<h4 style=\"color: #2d2d2d;\">已是第一篇文章</h4>"
                        htmlPro += "</a>"
                        htmlPro += "</div>"
                    }
                    if (data.articleNext != null) {
                        htmlNext += "<div class=\"detials\">"
                        htmlNext += "<p>下一篇文章</p>"
                        htmlNext += "<a href='index/toBlogDetailPage.do?id=" + data.articleNext.id + "'>"
                        htmlNext += "<h4 style=\"color: #2d2d2d;\">" + data.articleNext.articleTitle + "</h4>"
                        htmlNext += "</a>"
                        htmlNext += "</div>"
                        htmlNext += "<div class=\"arrow\">"
                        htmlNext += "<a href='index/toBlogDetailPage.do?id=" + data.articleNext.id + "'>"
                        htmlNext += "<span class=\"lnr text-white ti-arrow-right\"></span>"
                        htmlNext += "</a>"
                        htmlNext += "</div>"
                        htmlNext += "<div class=\"thumb\">"
                        htmlNext += "<a href='index/toBlogDetailPage.do?id=" + data.articleNext.id + "'>"
                        htmlNext += "<img class=\"img-fluid\" src=\"assets/img/post/" + data.articleNext.pictureId + "\" alt=''>"
                        htmlNext += "</a>"
                        htmlNext += "</div>"
                    } else {
                        htmlNext += "<div class=\"detials\">"
                        htmlNext += "<p>下一篇文章</p>"
                        htmlNext += "<a href='javascript:(0);'>"
                        htmlNext += "<h4 style=\"color: #2d2d2d;\">已是最后一篇文章</h4>"
                        htmlNext += "</a>"
                        htmlNext += "</div>"
                        htmlNext += "<div class=\"arrow\">"
                        htmlNext += "<a href='javascript:(0);'>"
                        htmlNext += "<span class=\"lnr text-white ti-arrow-right\"></span>"
                        htmlNext += "</a>"
                        htmlNext += "</div>"
                        htmlNext += "<div class=\"thumb\">"
                        htmlNext += "<a href='javascript:(0);'>"
                        htmlNext += "<img class=\"img-fluid\" src=\"assets/img/post/next.png\" alt=''>"
                        htmlNext += "</a>"
                        htmlNext += "</div>"
                    }
                    $("#previousArticle").html(htmlPro)
                    $("#nextArticle").html(htmlNext)
                }
            })
        }

        queryArticleProAndNext()

        //给提交评论按钮添加单击事件
        $("#submitCommentBtn").click(function () {
            var articleId = $("#articleSection").attr("articleId")
            var comment = $("#comment").val()
            if (comment == " ") {
                alert("您的评论内容不能为空")
                return;
            }
            var nickName = $("#nickName").val()
            if (nickName == " ") {
                alert("您的昵称不能为空")
                return;
            }
            var email = $("#email").val()
            $.ajax({
                url: "blogDetails/saveArticleComment.do",
                data: {
                    articleid: articleId,
                    comment: comment,
                    nickName: nickName
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data.code == 1) {
                        $("#commentForm").get(0).reset()
                        queryCommentList()
                    } else {
                        alert(data.message)
                    }
                }
            })
        })

        function queryCommentList() {
            var id = $("#articleSection").attr("articleId")
            $.ajax({
                url: "blogDetails/queryArticleComment.do",
                data: {
                    articleid: id
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    var htmlStr = ""
                    var year = ""
                    var month = ""
                    var day = ""
                    var m = ""
                    var pic = 0
                    $.each(data, function (index, obj) {
                        pic %= 12
                        year = (obj.commentDate).substr(0,4)
                        m = (obj.commentDate).substr(5,2)
                        switch (m) {
                            case "01" :
                                month = "January" ;
                                break;
                            case "02" :
                                month = "February" ;
                                break;
                            case "03" :
                                month = "March" ;
                                break;
                            case "04" :
                                month = "April" ;
                                break;
                            case "05" :
                                month = "May" ;
                                break;
                            case "06" :
                                month = "June" ;
                                break;
                            case "07" :
                                month = "July" ;
                                break;
                            case "08" :
                                month = "August" ;
                                break;
                            case "09" :
                                month = "September" ;
                                break;
                            case "10" :
                                month = "October" ;
                                break;
                            case "11" :
                                month = "November" ;
                                break;
                            case "12" :
                                month = "December" ;
                                break;
                        }
                        day = (obj.commentDate).substr(8,2)
                        htmlStr += "<div class=\"comment-list\">"
                        htmlStr += "<div class=\"single-comment justify-content-between d-flex\">"
                        htmlStr += "<div class=\"user justify-content-between d-flex\">"
                        htmlStr += "<div class=\"thumb\">"
                        htmlStr += "<img src=\"assets/img/blog/"+pic+".png\" alt=''>"
                        htmlStr += "</div>"
                        htmlStr += "<div class=\"desc\">"
                        htmlStr += "<p class=\"comment\">"+obj.comment+"</p>"
                        htmlStr += "<div class=\"d-flex justify-content-between\">"
                        htmlStr += "<div class=\"d-flex align-items-center\">"
                        htmlStr += "<h5>"
                        htmlStr += "<a href='javascript:(0);'>"+obj.nickName+"</a>"
                        htmlStr += "</h5>"
                        htmlStr += "<p class=\"date\">" + month + " "+ day + ", " + year +"</p>"
                        htmlStr += "</div>"
                        htmlStr += "<div class=\"reply-btn\">"
                        htmlStr += "</div>"
                        htmlStr += "</div>"
                        htmlStr += "</div>"
                        htmlStr += "</div>"
                        htmlStr += "</div>"
                        htmlStr += "</div>"
                        pic += 1
                    })
                    $(".comment-list").html(htmlStr)
                }
            })
        }
        queryCommentList()

        function queryCommentAndBrowse(){
            var articleId = $("#articleSection").attr("articleId")
                $.ajax({
                    url: "blogDetails/queryArticleAllTotal.do",
                    data: {
                        articleId: articleId
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        var browseTotal = " "+ data.browseTotal + " " +"访问"
                        var commentTotal = " "+ data.commentTotal + " " +"评论"
                        $("#browseTotal").append(browseTotal)
                        $("#commentTotal").append(commentTotal)
                    }
                })
        }

        queryCommentAndBrowse()
    })
</script>
</body>
</html>